<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<c:if test="${hasErrors}"><meta id="error"></c:if>

<form:form name="profileForm" commandName="profileForm">
<form:hidden path="id"/>

<table class="form">
<tr>
   <td>Username:</td>
   <td>
      <form:input path="username" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="username" cssStyle="color:red" />
   </td>
   <td width="10px" rowspan="3">&nbsp;</td>
   <td>Password:</td>
   <td>
      <form:password path="password" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /><br>
      <form:errors path="password" cssStyle="color:red" />
   </td>
   <td width="10px" rowspan="3">&nbsp;</td>
   <td>Enabled:</td>
   <td><div id='enabledCheckbox'></div><form:checkbox path="enabled" value="Y" cssStyle="display: none" /></td>
   <script type="text/javascript">
      $("#enabledCheckbox").jqxCheckBox({
         width: 20,
         height: 20,
         boxSize: 15, theme: getSowTheme('ui-redmond'),
         checked: $("input[name='enabled']").is(':checked')
      });
      $("#enabledCheckbox").bind('change', function (event) {
         $("input[name='enabled']").attr('checked', event.args.checked);
      });
   </script>
   <td width="10px" rowspan="3">&nbsp;</td>
   <td width="10px" rowspan="2">&nbsp;</td>
</tr>
<tr>
   <td>First Name:</td>
   <td>
      <form:input path="firstName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="firstName" cssStyle="color:red" />
   </td>
   <td>Last Name:</td>
   <td>
      <form:input path="lastName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="lastName" cssStyle="color:red" />
   </td>
   <td>Middle Name:</td>
   <td><form:input path="middleName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
</tr>
<tr>
   <td>Email:</td><td><form:input path="email" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
   <td>Phone:</td><td><form:input path="phone" maxlength="15" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
   <td>Role: </td>
   <td><div id='jqxRole'></div><form:select path="role" items="${roles}" itemLabel="authority" itemValue="id" cssStyle="display:none" /></td>
   <script type="text/javascript">
      $("#jqxRole").jqxComboBox({ width: '140', height: '21', theme: getSowTheme('ui-redmond'), autoDropDownHeight: true });
      $("#jqxRole").jqxComboBox('loadFromSelect', 'role');
      $("#jqxRole").jqxComboBox('selectIndex', $("#role").get(0).selectedIndex);
      $("#jqxRole").bind('change', function (event) { $("#role").val(event.args.item.value); });
   </script>
   <td><input id="btnUpdateInfo" type="button" value="Update" onclick="updateProfile()" style="cursor: pointer;" /></td>
   <script type="text/javascript">
   		$("#btnUpdateInfo").jqxButton({ theme: getSowTheme('ui-redmond') });
   </script>
</tr>
</table>

</form:form>